<template>
  <div class="bg-gradient-to-b from-sky-50 to-white rounded-lg shadow-lg p-6 overflow-hidden relative">
    <!-- 装饰性背景元素，增强层次感 -->
    <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-100 rounded-full filter blur-3xl opacity-30 -translate-y-1/2 translate-x-1/3"></div>
    <div class="absolute bottom-0 left-0 w-80 h-80 bg-sky-100 rounded-full filter blur-3xl opacity-20 translate-y-1/3 -translate-x-1/3"></div>

    <h2 class="text-xl font-semibold text-gray-800 mb-6 relative z-10 flex items-center">
      <span class="w-1 h-6 bg-gradient-to-b from-sky-500 to-indigo-600 rounded-full mr-3"></span>
      业务消息
      <span class="ml-2 text-sm font-normal text-gray-500 bg-sky-50 px-2 py-0.5 rounded-full">{{ businessMessages.length }} 条消息</span>
    </h2>

    <div class="space-y-4 relative z-10">
      <div
          v-for="(msg, index) in businessMessages"
          :key="index"
          class="border border-sky-100 bg-white/80 backdrop-blur-sm rounded-lg p-5 hover:shadow-md transition-all duration-300 hover:border-sky-200 group"
          :class="!msg.read ? 'ring-1 ring-sky-500' : ''"
      >
        <!-- 左侧消息类型图标 -->
        <div class="flex">
          <div class="mr-4 mt-1 flex-shrink-0">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-100 to-indigo-100 flex items-center justify-center text-sky-600 group-hover:scale-110 transition-transform">
              <font-awesome-icon
                  :icon="msg.icon"
                  class="text-lg"
              />
            </div>
            <!-- 未读标识 -->
            <div v-if="!msg.read" class="w-3 h-3 bg-sky-500 rounded-full mt-1 mx-auto"></div>
          </div>

          <div class="flex-1">
            <div class="flex justify-between items-start">
              <h3 class="font-medium text-gray-800 group-hover:text-sky-700 transition-colors">{{ msg.title }}</h3>
              <span class="text-sm text-gray-500">{{ msg.time }}</span>
            </div>
            <p class="text-gray-600 mt-2 line-clamp-2 group-hover:line-clamp-none transition-all duration-300">{{ msg.content }}</p>
            <div class="mt-3 flex justify-end">
              <button
                  class="text-sm px-3 py-1 rounded-full transition-colors"
                  :class="msg.read
                  ? 'text-gray-500 hover:bg-gray-100'
                  : 'bg-sky-50 text-sky-700 hover:bg-sky-100'"
                  @click="msg.read = true"
              >
                <font-awesome-icon icon="check-circle" class="mr-1" />
                {{ msg.read ? '已读' : '标记为已读' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态处理 -->
    <div v-if="businessMessages.length === 0" class="text-center py-16 relative z-10">
      <div class="w-16 h-16 mx-auto bg-gradient-to-br from-sky-100 to-indigo-100 rounded-full flex items-center justify-center text-sky-500 mb-4">
        <font-awesome-icon icon="inbox" class="text-2xl" />
      </div>
      <p class="text-gray-500">暂无业务消息</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      businessMessages: [
        {
          title: '购买合同通知',
          content: '您购买的"劳动人事合同模板"已成功支付，可在"我的订单"中查看详情并下载。',
          time: '2023-10-18 09:30',
          icon: 'credit-card',
          read: false
        },
        {
          title: '合同即将到期提醒',
          content: '您购买的"借款合同模板"服务将在7天后到期，到期后将无法继续编辑，请及时续费。',
          time: '2023-10-17 14:25',
          icon: 'exclamation-circle',
          read: false
        },
        {
          title: '模板更新通知',
          content: '您收藏的"买卖合同模板"已更新至2.0版本，新增了电子签名功能，建议重新下载使用。',
          time: '2023-10-15 11:40',
          icon: 'file-import',
          read: true
        }
      ]
    }
  }
}
</script>
